<template>
	<div id="friend-merchant-manage" class="w-h-100 pos-r flex-1 apply-container" style="box-sizing: border-box; overflow: hidden">
		<div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px">
			<div class="search-s page-public-s" style="box-sizing: border-box">
				<el-card shadow="never" :body-style="{ paddingBottom: '0' }">
					<el-form class="box-f" ref="queryForm" :inline="true">
						<!-- <el-form-item label="产品名称：">
                            <el-input v-model="transferVal" placeholder="请输入搜索产品名称" />
                        </el-form-item> -->

						<el-form-item>
							<el-button v-if="$hasPer('SupplierProductManagement1:add')" @click="nodeClick" icon="ele-Plus" type="primary"> 新增 </el-button>
							<el-button v-if="$hasPer('SupplierProductManagement7:excel')" @click="handleExport" icon="ele-Download"> 导出数据 </el-button>
							<!-- <el-button  @click="handleExport" icon="ele-Download"> 批量导入 </el-button> -->
							<el-button v-if="$hasPer('SupplierProductManagement8:download')" icon="ele-Download" @click="downClick">下载模板</el-button>
							<el-upload
							v-if="$hasPer('SupplierProductManagement9:upload')"
                              class="upload-demo"
                              action="#"
                              :auto-upload='false'
                              ref="aModel"
                              :show-file-list="false"
                              :on-change="( file:any ) => { ExcelChange( file ) }"
                              :limit="1"
                          >
                              <el-button icon="ele-Upload">批量导入</el-button>
                          </el-upload>
						</el-form-item>
					</el-form>
				</el-card>
			</div>

			<div style="box-sizing: border-box" class="flex-1 pos-r">
				<div class="pos-a w-h-100" style="box-sizing: border-box">
					<el-card class="box-card w-h-100" shadow="never" style="margin-top: 16px">
						<div style="" class="w-h-100 ver-flex">
							<div class="flex-1 pos-r">
								<div class="pos-a w-h-100">
									<el-table ref="excelRef" :data="list" class="w-h-100" style="width: 100%" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
										<el-table-column type="index" :label="$t('9CxIs0EjWmL9PjyBegweK')" width="55" :show-overflow-tooltip="true" align="center" :index="indexMethod" />
										<el-table-column min-width="100" :show-overflow-tooltip="true" label="友商编码" align="center">
											<el-table-column min-width="160" :show-overflow-tooltip="true" align="center">
												<template #header>
													<SearchModel typeId="v_ProviderCode" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
												</template>
												<template #default="{ row }">
													{{ row.v_ProviderCode }}
												</template>
											</el-table-column>
										</el-table-column>
										<el-table-column min-width="100" :show-overflow-tooltip="true" label="组织名称" align="center">
											<el-table-column min-width="160" :show-overflow-tooltip="true" align="center">
												<template #header>
													<SearchModel typeId="v_ProvideName" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
												</template>
												<template #default="{ row }">
													{{ row.v_ProvideName }}
												</template>
											</el-table-column>
										</el-table-column>
										<el-table-column min-width="100" :show-overflow-tooltip="true" prop="v_ProviderMnemonic" label="助记码" align="center">
											<el-table-column min-width="160" :show-overflow-tooltip="true" align="center">
												<template #header>
													<SearchModel typeId="v_ProviderMnemonic" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
												</template>
												<template #default="{ row }">
													{{ row.v_ProviderMnemonic ? row.v_ProviderMnemonic : ' - ' }}
												</template>
											</el-table-column>
										</el-table-column>

										<el-table-column min-width="100" :show-overflow-tooltip="true" label="英文名称" align="center">
											<el-table-column min-width="160" :show-overflow-tooltip="true" align="center">
												<template #header>
													<SearchModel typeId="v_ProviderEnglishName" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
												</template>
												<template #default="{ row }">
													<span v-if="row.v_ProviderEnglishName">{{ row.v_ProviderEnglishName }}</span>
													<span v-else> - </span>
												</template>
											</el-table-column>
										</el-table-column>
										<el-table-column min-width="120" :show-overflow-tooltip="true" prop="n_ProviderTypeName" label="友商类型名称" align="center" />
										<!-- <el-table-column min-width="120" :show-overflow-tooltip="true" prop="n_ProviderTypeName" label="友商类型名称" align="center" >
											<el-table-column min-width="160" :show-overflow-tooltip="true" align="center">
												<template #header>
													<SearchModel typeId="n_ProviderTypeName" typeVal="select" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
												</template>
												<template #default="{ row }">
													{{ row.n_ProviderTypeName }}
												</template>
											</el-table-column>
										</el-table-column> -->
										<el-table-column min-width="160" :show-overflow-tooltip="true" label="友商基本类型名称" align="center" >
													<template #default="{ row }">
														{{ row.n_ProviderBasicTypeName ? row.n_ProviderBasicTypeName : ' - ' }}
												</template>
										</el-table-column>
										<el-table-column min-width="150" :show-overflow-tooltip="true" prop="v_Product" label="产品名称" align="center" />
										<el-table-column min-width="160" :show-overflow-tooltip="true" label="统一社会信用代码" align="center">
											<el-table-column min-width="160" :show-overflow-tooltip="true" align="center">
												<template #header>
													<SearchModel typeId="v_SocialCreditCode" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
												</template>
												<template #default="{ row }">
													{{ row.v_SocialCreditCode ? row.v_SocialCreditCode : ' - ' }}
												</template>
											</el-table-column>
										</el-table-column>
										<el-table-column min-width="150" :show-overflow-tooltip="true"  label="行政区域名称" align="center" >
													<template #default="{ row }">
														{{ row.n_AdministrativeName ? row.n_AdministrativeName : ' - ' }}
												</template>
										</el-table-column>
										<el-table-column min-width="120" :show-overflow-tooltip="true"  label="国家/地区名称" align="center">
													<template #default="{ row }">
														{{ row.n_CountryName ? row.n_CountryName : ' - ' }}
												</template>
										</el-table-column>

										<el-table-column :label="$t('qNuJ1BpqhakfykxAewQs')" align="center" fixed="right">
											<el-table-column min-width="260" fixed="right" align="center">
												<template #header>
													<el-button @click="searchClick" icon="ele-Search" type="primary" text> {{ $t('glYiIwmuhAaVvj1aYfZW') }} </el-button>
													<el-button @click="resetClick" icon="ele-Refresh" text> 重置 </el-button>
												</template>
												<template #default="scope">
													<div class="operate-s">
														<el-button @click="detailsClick(scope.row.n_Id)" class="icon-e" icon="ele-View" size="small" text type="success"> 详情 </el-button>
														<el-button v-if="$hasPer('SupplierProductManagement2:edit')" @click="nodeClick(scope.row)" class="icon-e" icon="ele-Edit" size="small" text type="primary">
															编辑
														</el-button>
														<el-button v-if="$hasPer('SupplierProductManagement4:create')" size="small" @click="documentClick(scope.row)" text type="primary"> 附件管理 </el-button>
														<template v-if="$hasPer('Management3:delete')">
															<el-button @click="deleteHandle(scope.row.n_Id, getData)" class="icon-e" icon="ele-Delete" size="small" text type="danger"> 删除 </el-button>
														</template>
													</div>
												</template>
											</el-table-column>
										</el-table-column>
									</el-table>
								</div>
							</div>
							<div style="height: 30px; margin-top: 20px" class="hr-flex-start">
								<el-pagination
									v-model:currentPage="pageNo"
									v-model:page-size="pageSize"
									:total="totalRows"
									:page-sizes="[10, 20, 50, 100]"
									small
									background
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									layout="total, sizes, prev, pager, next, jumper"
									class="w-h-100"
								/>
							</div>
						</div>
					</el-card>
				</div>
			</div>
		</div>
		<!-- 新增and编辑 -->
		<el-dialog draggable :close-on-click-modal="false" :close-on-press-escape="false" v-model="showDialogVisible" :title="editId ? '编辑' : '新增'" width="50%" @close="cancelUseClick">
			<el-form :model="ruleForm" size="default" label-width="120px" ref="formRef" :rules="rules">
				<el-divider content-position="left"> 基本信息 </el-divider>
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="v_ProviderCode" label="友商编码">
							<el-input
								@blur="
									(e) => {
										fieldRepeatCheckBlur(e, list);
									}
								"
								v-model="ruleForm.v_ProviderCode"
								placeholder="友商编码"
								clearable
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="v_ProvideName" label="组织名称">
							<el-input v-model="ruleForm.v_ProvideName" placeholder="组织名称" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="上级友商">
							<el-select v-model="ruleForm.v_ParentProviderId" class="m-2" placeholder="上级友商" style="width: 100%">
								<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="英文名称">
							<el-input v-model="ruleForm.v_ProviderEnglishName" placeholder="英文名称" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="友商简称">
							<el-input v-model="ruleForm.v_ProviderAbbreviation" placeholder="友商简称" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="v_ProviderMnemonic" label="助记码">
							<el-input
								v-model="ruleForm.v_ProviderMnemonic"
								@blur="
									(e) => {
										fieldRepeatCheckBlur(e, list);
									}
								"
								placeholder="助记码"
								clearable
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="v_SocialCreditCode" label="社会信用代码">
							<el-input
								@blur="
									(e) => {
										fieldRepeatCheckBlur(e, list);
									}
								"
								v-model="ruleForm.v_SocialCreditCode"
								placeholder="统一社会信用代码"
								clearable
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="法人">
							<el-input v-model="ruleForm.v_LegalPersons" placeholder="法人" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="注册资本">
							<el-input v-model="ruleForm.v_RegisteredCapital" placeholder="注册资本" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="v_CurrencyId" label="注册资金币种">
							<el-select v-model="ruleForm.v_CurrencyId" class="m-2" placeholder="注册资金币种" style="width: 100%">
								<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="v_EconomyType" label="经济类型">
							<el-input v-model="ruleForm.v_EconomyType" placeholder="经济类型" clearable type="textarea" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="v_ProviderAddress" label="企业详细地址">
							<el-input v-model="ruleForm.v_ProviderAddress" placeholder="企业详细地址" clearable type="textarea" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="n_ProviderBasicType" label="友商基本类型">
							<el-select v-model="ruleForm.n_ProviderBasicType" class="m-2" placeholder="友商基本类型" style="width: 100%">
								<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="n_ProviderType" label="组织名称">
							<el-select v-model="ruleForm.n_ProviderType" class="m-2" placeholder="组织名称" style="width: 100%">
								<el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="产品名称">
							<el-input v-model="ruleForm.v_Product" placeholder="产品名称" clearable />
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="n_AdministrativeId" label="行政区域">
							<el-select v-model="ruleForm.n_AdministrativeId" class="m-2" placeholder="行政区域" style="width: 100%">
								<el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="web网站">
							<el-input v-model="ruleForm.v_WebUrl" placeholder="web网站" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="电话">
							<el-input v-model="ruleForm.v_TelephoneNumber" placeholder="电话" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="传真地址">
							<el-input v-model="ruleForm.v_FaxAddress" placeholder="传真地址" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="e-mail地址">
							<el-input v-model="ruleForm.v_EmailAddress" placeholder="e-mail地址" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item prop="n_CountryId" label="国家/地区">
							<el-select v-model="ruleForm.n_CountryId" class="m-2" placeholder="国家/地区" style="width: 100%">
								<el-option v-for="item in options6" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="备注">
							<el-input v-model="ruleForm.v_Remark" placeholder="备注" clearable type="textarea" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancelUseClick">取消</el-button>
					<el-button type="primary" @click="controlUseClick(formRef, getData)">确定</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 查看详情 -->
		<el-dialog title="查看详情" v-model="detailsDialog" width="50%" draggable :close-on-click-modal="false" :close-on-press-escape="false" @close="detailsDialog = false">
			<el-descriptions :column="2" border>
				<el-descriptions-item>
					<template #label> id </template>
					{{ detailsData.n_Id }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 友商编码 </template>
					{{ detailsData.v_ProviderCode ? detailsData.v_ProviderCode : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 组织名称 </template>
					{{ detailsData.v_ProvideName ? detailsData.v_ProvideName : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 友商简称 </template>
					{{ detailsData.v_ProviderAbbreviation ? detailsData.v_ProviderAbbreviation : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 助记码 </template>
					{{ detailsData.v_ProviderMnemonic ? detailsData.v_ProviderMnemonic : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 英文名称 </template>
					{{ detailsData.v_ProviderEnglishName ? detailsData.v_ProviderEnglishName : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 上级友商id </template>
					{{ detailsData.v_ParentProviderId ? detailsData.v_ParentProviderId : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 上级友商名称 </template>
					{{ detailsData.v_ParentProviderName ? detailsData.v_ParentProviderName : '-' }}
				</el-descriptions-item>

				<el-descriptions-item>
					<template #label> 统一社会信用代码 </template>
					{{ detailsData.v_SocialCreditCode ? detailsData.v_SocialCreditCode : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 法人 </template>
					{{ detailsData.v_LegalPersons ? detailsData.v_LegalPersons : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 注册资本 </template>
					{{ detailsData.v_RegisteredCapital ? detailsData.v_RegisteredCapital : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 注册资金币种id </template>
					{{ detailsData.v_CurrencyId ? detailsData.v_CurrencyId : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 注册资金币种名称 </template>
					{{ detailsData.v_CurrencyName ? detailsData.v_CurrencyName : '-' }}
				</el-descriptions-item>

				<el-descriptions-item>
					<template #label> 经济类型 </template>
					{{ detailsData.v_EconomyType ? detailsData.v_EconomyType : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 企业详细地址 </template>
					{{ detailsData.v_ProviderAddress ? detailsData.v_ProviderAddress : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 友商基本类型id </template>
					{{ detailsData.n_ProviderBasicType ? detailsData.n_ProviderBasicType : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 友商基本类型名称 </template>
					{{ detailsData.n_ProviderBasicTypeName ? detailsData.n_ProviderBasicTypeName : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 友商类型id </template>
					{{ detailsData.n_ProviderType ? detailsData.n_ProviderType : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 友商类型名称 </template>
					{{ detailsData.n_ProviderTypeName ? detailsData.n_ProviderTypeName : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 产品名称 </template>
					{{ detailsData.v_Product ? detailsData.v_Product : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 行政区域id </template>
					{{ detailsData.n_AdministrativeId ? detailsData.n_AdministrativeId : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 行政区域名称 </template>
					{{ detailsData.n_AdministrativeName ? detailsData.n_AdministrativeName : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> web网站 </template>
					{{ detailsData.v_WebUrl ? detailsData.v_WebUrl : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 电话 </template>
					{{ detailsData.v_TelephoneNumber ? detailsData.v_TelephoneNumber : '-' }}
				</el-descriptions-item>

				<el-descriptions-item>
					<template #label> 传真地址 </template>
					{{ detailsData.v_FaxAddress ? detailsData.v_FaxAddress : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> e-mail地址 </template>
					{{ detailsData.v_EmailAddress ? detailsData.v_EmailAddress : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 国家/地区id </template>
					{{ detailsData.n_CountryId ? detailsData.n_CountryId : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 国家/地区名称 </template>
					{{ detailsData.n_CountryName ? detailsData.n_CountryName : '-' }}
				</el-descriptions-item>

				<el-descriptions-item>
					<template #label> 备注 </template>
					{{ detailsData.v_Remark ? detailsData.v_Remark : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 创建时间 </template>
					{{ detailsData.createdTime ? detailsData.createdTime : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 创建者 </template>
					{{ detailsData.createdUserName ? detailsData.createdUserName : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 更新时间 </template>
					{{ detailsData.updatedTime ? detailsData.updatedTime : '-' }}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label> 更新者 </template>
					{{ detailsData.updatedUserName ? detailsData.updatedUserName : '-' }}
				</el-descriptions-item>
			</el-descriptions>
		</el-dialog>
		<!-- 文件 -->
		<uploadFile :fileInfo="fileInfo" :isShowUploadDialog="fileDialog" @closeUploadDialog="cancelFileClick" @controlFileClick="controlFileClick" @updateData="getData" />
	</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive, toRaw } from 'vue';
import getTableData from '/@/utils/getTableData';
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
import useCurrentInstance from '/@/utils/hook/useCurrentInstance';
import uploadFile from './uploadFile.vue';
import {
	getSupplierProductManagementApi,
	updateSupplierProductManagementApi,
	addSupplierProductManagementApi,
	deleteSupplierProductManagementApi,
	getSupplierBasicInfoApi2,
	getSupplierCountryRegionApi,
	getSupplierProductManagementDetailApi,
} from '/@/api/centerControl/allInterface';
import SearchModel from '/@/views/oms/component/search-model.vue';
import { exportToExcel } from '/@/utils/exportToExcel';
import { UploadBatchImportData2 } from '/@/api/centerControl/oms';
const { proxy } = useCurrentInstance();
const $t = proxy.$t;
let searchObj: any = reactive({});
const ruleForm = reactive({
	// V_ProviderCode、V_ProviderMnemonic和V_SocialCreditCode这三个不能重复
	v_Product: '', //产品名称
	v_ProviderCode: '', //友商编码（必填）
	v_ProvideName: '', //友商名称（必填）
	v_ProviderAbbreviation: '', //友商简称
	v_ProviderMnemonic: '', //助记码
	v_ProviderEnglishName: '', //英文名称
	v_ParentProviderId: '', //上级友商id，做个单选的下拉框，请求/OMS/ProviderV2/List
	v_SocialCreditCode: '', //统一社会信用代码（必填）
	v_LegalPersons: '', //法人
	v_RegisteredCapital: '', //注册资本
	v_CurrencyId: '', //注册资金币种，做个单选的下拉框，请求/sysDictData/list?TypeCode=CurrencyType
	v_EconomyType: '', //经济类型（必填）
	v_ProviderAddress: '', //企业详细地址（必填）
	n_ProviderBasicType: '', //友商基本类型（必填），做个单选的下拉框，请求/sysDictData/list?TypeCode=ProviderBasicType
	n_ProviderType: '', //友商类型（必填），做个单选的下拉框，请求/sysDictData/list?TypeCode=ProviderType
	n_AdministrativeId: '', //行政区域（必填），做个单选的下拉框，请求/sysDictData/list?TypeCode=Administrative
	v_WebUrl: '', //web网站
	v_TelephoneNumber: '', //电话
	v_FaxAddress: '', //传真地址
	v_EmailAddress: '', //e-mail地址
	n_CountryId: '', //国家/地区，做个单选的下拉框，请求/sysDictData/list?TypeCode=Country
	v_Remark: '', //备注
});

// 友商编码
const fieldRepeatCheckBlur = (e, list) => {
	console.log(e.target.value, list);
	if (editId.value) {
		const newList = list.filter((i) => i.n_Id !== editId.value);
		console.log(newList);
		const bl = newList.some((i) => i.v_ProviderCode == e.target.value || i.v_ProviderMnemonic == e.target.value || i.v_SocialCreditCode == e.target.value);
		console.log(bl);
		if (bl) {
			ElMessage.error('当前输入内容已存在，请重新输入！');
			e.target.value = '';
		}
	} else {
		const bl = list.some((i) => i.v_ProviderCode == e.target.value || i.v_ProviderMnemonic == e.target.value || i.v_SocialCreditCode == e.target.value);
		console.log(bl);

		if (bl) {
			ElMessage.error('当前输入内容已存在，请重新输入！');
			e.target.value = '';
		}
	}
};

/***** searchClick 查询按钮 *****/
const searchClick = () => {
	// searchObj.ProductName = transferVal.value
	let newObj = Object.keys(searInfo.value);
	if (newObj.length !== 0) {
		newObj.map((i: any) => {
			searchObj[i] = searInfo.value[i];
		});
	}
};

const resetClick = () => {
	searInfo.value = {};
	let newObj = Object.keys(searchObj);
	if (newObj.length !== 0) {
		newObj.map((i: any) => {
			searchObj[i] = '';
			// console.log(i);
		});
	}
	initInfoFun();
};

// 查看详情
const detailsData: any = ref();
const detailsDialog = ref(false);
const detailsClick = async (id) => {
	const res = await getSupplierProductManagementDetailApi({ N_Id: id });
	detailsData.value = res.data;
	detailsDialog.value = true;
};

/*** nodeClick 新增/编辑 校验 */
const formRef = ref<FormInstance>();
const rules = reactive({
	v_ProviderCode: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	v_ProvideName: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	v_SocialCreditCode: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	v_EconomyType: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	v_ProviderAddress: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	n_ProviderBasicType: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	n_ProviderType: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	n_AdministrativeId: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	n_CountryId: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	v_CurrencyId: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
	v_ProviderMnemonic: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
});

/*** nodeClick 新增/编辑点击事件 */
const showDialogVisible = ref(false);
const editId = ref(0);
const nodeClick = async (obj: any) => {
	// 获取上级友商
	options1.value = [];
	const res = await getSupplierBasicInfoApi2();
	options1.value = res.data.map((element: any) => {
		return {
			label: element.v_ProvideName,
			value: element.n_Id,
		};
	});

	if (obj.n_Id) {
		editId.value = obj.n_Id;
		getSupplierProductManagementDetailApi({ N_Id: obj.n_Id }).then((res) => {
			ruleForm.v_ProviderCode = res.data.v_ProviderCode; //友商编码（必填）
			ruleForm.v_ProvideName = res.data.v_ProvideName; //友商名称（必填）
			ruleForm.v_ProviderAbbreviation = res.data.v_ProviderAbbreviation; //友商简称
			ruleForm.v_ProviderMnemonic = res.data.v_ProviderMnemonic; //助记码
			ruleForm.v_ProviderEnglishName = res.data.v_ProviderEnglishName; //英文名称
			ruleForm.v_ParentProviderId = res.data.v_ParentProviderId; //上级友商id，做个单选的下拉框，请求/OMS/ProviderV2/List
			ruleForm.v_SocialCreditCode = res.data.v_SocialCreditCode; //统一社会信用代码（必填）
			ruleForm.v_LegalPersons = res.data.v_LegalPersons; //法人
			ruleForm.v_RegisteredCapital = res.data.v_RegisteredCapital; //注册资本
			ruleForm.v_CurrencyId = res.data.v_CurrencyId; //注册资金币种，做个单选的下拉框，请求/sysDictData/list?TypeCode=CurrencyType
			ruleForm.v_EconomyType = res.data.v_EconomyType; //经济类型（必填）
			ruleForm.v_ProviderAddress = res.data.v_ProviderAddress; //企业详细地址（必填）
			ruleForm.n_ProviderBasicType = res.data.n_ProviderBasicType; //友商基本类型（必填），做个单选的下拉框，请求/sysDictData/list?TypeCode=ProviderBasicType
			ruleForm.n_ProviderType = res.data.n_ProviderType; //友商类型（必填），做个单选的下拉框，请求/sysDictData/list?TypeCode=ProviderType
			ruleForm.n_AdministrativeId = res.data.n_AdministrativeId; //行政区域（必填），做个单选的下拉框，请求/sysDictData/list?TypeCode=Administrative
			ruleForm.v_WebUrl = res.data.v_WebUrl; //web网站
			ruleForm.v_TelephoneNumber = res.data.v_TelephoneNumber; //电话
			ruleForm.v_FaxAddress = res.data.v_FaxAddress; //传真地址
			ruleForm.v_EmailAddress = res.data.v_EmailAddress; //e-mail地址
			ruleForm.n_CountryId = res.data.n_CountryId; //国家/地区，做个单选的下拉框，请求/sysDictData/list?TypeCode=Country
			ruleForm.v_Remark = res.data.v_Remark; //备注
			ruleForm.v_Product = res.data.v_Product; //产品名称
		});
	}
	showDialogVisible.value = true;
};

/*** cancelUseClick 取消事件 */
const cancelUseClick = () => {
	showDialogVisible.value = false;
	formRef.value?.resetFields();
	editId.value = 0;
	ruleForm.v_ProviderCode = ''; //友商编码（必填）
	ruleForm.v_ProvideName = ''; //友商名称（必填）
	ruleForm.v_ProviderAbbreviation = ''; //友商简称
	ruleForm.v_ProviderMnemonic = ''; //助记码
	ruleForm.v_ProviderEnglishName = ''; //英文名称
	ruleForm.v_ParentProviderId = ''; //上级友商id，做个单选的下拉框，请求/OMS/ProviderV2/List
	ruleForm.v_SocialCreditCode = ''; //统一社会信用代码（必填）
	ruleForm.v_LegalPersons = ''; //法人
	ruleForm.v_RegisteredCapital = ''; //注册资本
	ruleForm.v_CurrencyId = ''; //注册资金币种，做个单选的下拉框，请求/sysDictData/list?TypeCode=CurrencyType
	ruleForm.v_EconomyType = ''; //经济类型（必填）
	ruleForm.v_ProviderAddress = ''; //企业详细地址（必填）
	ruleForm.n_ProviderBasicType = ''; //友商基本类型（必填），做个单选的下拉框，请求/sysDictData/list?TypeCode=ProviderBasicType
	ruleForm.n_ProviderType = ''; //友商类型（必填），做个单选的下拉框，请求/sysDictData/list?TypeCode=ProviderType
	ruleForm.n_AdministrativeId = ''; //行政区域（必填），做个单选的下拉框，请求/sysDictData/list?TypeCode=Administrative
	ruleForm.v_WebUrl = ''; //web网站
	ruleForm.v_TelephoneNumber = ''; //电话
	ruleForm.v_FaxAddress = ''; //传真地址
	ruleForm.v_EmailAddress = ''; //e-mail地址
	ruleForm.n_CountryId = ''; //国家/地区，做个单选的下拉框，请求/sysDictData/list?TypeCode=Country
	ruleForm.v_Remark = ''; //备注
	ruleForm.v_Product = ''; //产品名称
};

/*** controlUseClick 提交事件 */
const controlUseClick = async (formEl: FormInstance | undefined, update: Function) => {
	if (!formEl) return;
	await formEl.validate((valid, fields) => {
		if (valid) {
			console.log('submit!');
			ruleForm.v_ParentProviderId ? ruleForm.v_ParentProviderId : (ruleForm.v_ParentProviderId = 0);
			if (editId.value) {
				const obj = Object.assign({ ...ruleForm, n_Id: editId.value });
				updateSupplierProductManagementApi(obj).then((res: any) => {
					console.log(res, 'res');
					cancelUseClick();
					update();
				});
			} else {
				addSupplierProductManagementApi(ruleForm).then((res: any) => {
					console.log(res, 'res');
					cancelUseClick();
					update();
				});
			}
		} else {
			console.log('error submit!', fields);
		}
	});
};

/*** deleteHandle 删除数据事件 */
const deleteHandle = async (val: String | Number, updateFun: Function) => {
	ElMessageBox.confirm($t('ps5xm1Fk4H9FduSi7ljhW'), $t('imXkp2fMe2jXax1e9yR91'), {
		confirmButtonText: $t('vs4icKxkP7sr74uXwUoxR'),
		cancelButtonText: $t('tbKfNeTsqNeN8UaxlQlQm'),
		type: 'warning',
	})
		.then(async () => {
			let param = { n_Id: val };
			try {
				let res: any = await deleteSupplierProductManagementApi(param);
				if (res.success) {
					updateFun();
				}
			} catch (err) {
				return;
			}
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: $t('oWdtapHuvktLiQJySdnJx'),
			});
		});
};

		/*** downClick 下载模板 */
		const pathData = ref(import.meta.env.VITE_API_URL + '/'); // 获取地址
		const downClick = () => {
			// window.location.href = 'www.baidu.com' // 覆盖当前页
			window.open(toRaw(pathData.value) + 'Upload/SMS/Batch/友商管理-导入模板.xlsx', '_blank'); // 打开新页面
		};

      /*** ExcelChange 导入Excel */
      const ExcelChange = (item:any) => {
          let reader = new FileReader()
          reader.readAsDataURL(item.raw)
          reader.onload = (e:any) => {
              let base64String = e.target.result;
              let param:any = new Object()
              param.ModelType = 'ProvideInfo'
              param.FileContent = base64String
              uploadFun1(param)
          }
      }
      /*** uploadFun 批量导入数据接口 */
	  const aModel = ref()
      const uploadFun1 = async (p: Object ) => {
          aModel.value.clearFiles()
          let res:any = await UploadBatchImportData2(p)
          if(res.success) getData()
      }

/*** 初始化数据 */
const basicsInfo: any = ref([]);
const initInfoFun = () => {
	basicsInfo.value = [
		{
			typeId: 'v_ProviderCode', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
			typeNam: '', // 输入类型(number,text等) --- 选填
			searchVal: 'V_ProviderCode', // 查询字段 --- 必填
			defaultVal: '', // 字段默认值 --- 选填
			placeholder: '友商编码', // placeholder数据
			defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
			eventType: '', // 事件类型（如burl/change等） --- 选填
			defaultEvent: '', // 事件名称 --- 选填
		},
		{
			typeId: 'v_ProvideName', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
			typeNam: '', // 输入类型(number,text等) --- 选填
			searchVal: 'V_ProvideName', // 查询字段 --- 必填
			defaultVal: '', // 字段默认值 --- 选填
			placeholder: '组织名称', // placeholder数据
			defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
			eventType: '', // 事件类型（如burl/change等） --- 选填
			defaultEvent: '', // 事件名称 --- 选填
		},
		{
			typeId: 'v_ProviderMnemonic', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
			typeNam: '', // 输入类型(number,text等) --- 选填
			searchVal: 'V_ProviderMnemonic', // 查询字段 --- 必填
			defaultVal: '', // 字段默认值 --- 选填
			placeholder: '助记码', // placeholder数据
			defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
			eventType: '', // 事件类型（如burl/change等） --- 选填
			defaultEvent: '', // 事件名称 --- 选填
		},
		{
			typeId: 'v_ProviderEnglishName', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
			typeNam: '', // 输入类型(number,text等) --- 选填
			searchVal: 'V_ProviderEnglishName', // 查询字段 --- 必填
			defaultVal: '', // 字段默认值 --- 选填
			placeholder: '英文名称', // placeholder数据
			defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
			eventType: '', // 事件类型（如burl/change等） --- 选填
			defaultEvent: '', // 事件名称 --- 选填
		},
		{
			typeId: 'v_SocialCreditCode', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
			typeNam: '', // 输入类型(number,text等) --- 选填
			searchVal: 'V_SocialCreditCode', // 查询字段 --- 必填
			defaultVal: '', // 字段默认值 --- 选填
			placeholder: '社会信用代码', // placeholder数据
			defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
			eventType: '', // 事件类型（如burl/change等） --- 选填
			defaultEvent: '', // 事件名称 --- 选填
		},
		{
			typeId: 'n_ProviderTypeName', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
			typeNam: '', // 输入类型(number,text等) --- 选填
			searchVal: 'N_ProviderType', // 查询字段 --- 必填
			defaultVal: '', // 字段默认值 --- 选填
			placeholder: '友商类型', // placeholder数据
			defaultProp: options4.value, // 下拉框中使用，除下拉框外其它情况为空 --- 选填
			eventType: '', // 事件类型（如burl/change等） --- 选填
			defaultEvent: '', // 事件名称 --- 选填
		},
	];
};

const searInfo: any = ref();
const searchHandel = (val: any) => {
	searInfo.value = val;
};

/*** ================================= 导出数据函数操作 ================================= */
const excelRef: any = ref(null);
const handleExport = () => {
	if (excelRef.value) {
		if (excelRef.value.data.length !== 0) {
			let tableExcel: any = [];
			let tableArr = excelRef.value.data;
			tableArr.map((item: any) => {
				let tableObj: any = {};
				tableObj['友商编码'] = item.v_ProviderCode ? item.v_ProviderCode : '-';
				tableObj['组织名称'] = item.v_ProvideName ? item.v_ProvideName : '-';
				tableObj['助记码'] = item.v_ProviderMnemonic ? item.v_ProviderMnemonic : '-';
				tableObj['英文名称'] = item.v_ProviderEnglishName ? item.v_ProviderEnglishName : '-';

				tableObj['友商类型名称'] = item.n_ProviderTypeName ? item.n_ProviderTypeName : '-';
				tableObj['友商基本类型名称'] = item.n_ProviderBasicTypeName ? item.n_ProviderBasicTypeName : '-';
				tableObj['产品名称'] = item.v_Product ? item.v_Product : '-';
				tableObj['统一社会信用代码'] = item.v_SocialCreditCode ? item.v_SocialCreditCode : '-';
				tableObj['行政区域名称'] = item.n_AdministrativeName ? item.n_AdministrativeName : '-';
				tableObj['国家/地区名称'] = item.n_CountryName ? item.n_CountryName : '-';
				tableExcel.push(tableObj);
			});
			exportToExcel(tableExcel, '供应商产品管理.xlsx');
		} else {
			ElMessage({
				type: 'error',
				message: '暂无数据导出',
			});
		}
	}
};

/*** 附件管理 */
const fileInfo = ref();
const fileDialog = ref(false);
/*** cancelFileClick 文件上传取消事件 */
const cancelFileClick = () => {
	fileDialog.value = false;
};

/*** controlFileClick 文件上传提交事件 */
const controlFileClick = () => {
	fileDialog.value = false;
};

/*** documentClick 文档上传事件 */
const documentClick = (val: any) => {
	console.log(val, 'val');
	val.sourceType = 10;
	val.sourceId = val.n_Id;
	val.titleCon = '附件上传';
	fileInfo.value = JSON.stringify(val);
	fileDialog.value = true;
};

const { handleCurrentChange, pageSize, pageNo, handleSizeChange, totalRows, list, indexMethod, loading, getData } = getTableData(getSupplierProductManagementApi, {}, searchObj);

const options1: any = ref([]);
const options2: any = ref([]);
const options3: any = ref([]);
const options4: any = ref([]);
const options5: any = ref([]);
const options6: any = ref([]);
onMounted(async () => {
	await initInfoFun();

	//获取友商类型
	const res4 = await getSupplierCountryRegionApi({ TypeCode: 'ProviderType' });
	options4.value = res4.data.map((i: any) => {
		return {
			label: i.value,
			value: i.id,
		};
	});
	//获取注册资金币种
	const res2 = await getSupplierCountryRegionApi({ TypeCode: 'CurrencyType' });
	options2.value = res2.data.map((i: any) => {
		return {
			label: i.value,
			value: i.id,
		};
	});
	//获取友商基本类型
	const res3 = await getSupplierCountryRegionApi({ TypeCode: 'ProviderBasicType' });
	options3.value = res3.data.map((i: any) => {
		return {
			label: i.value,
			value: i.id,
		};
	});

	//获取行政区域
	getSupplierCountryRegionApi({ TypeCode: 'Administrative' }).then((res) => {
		options5.value = res.data.map((i: any) => {
			return {
				label: i.value,
				value: i.id,
			};
		});
	});

	// 获取国家地区
	getSupplierCountryRegionApi({ TypeCode: 'Country' }).then((res) => {
		options6.value = res.data.map((i: any) => {
			return {
				label: i.value,
				value: i.id,
			};
		});
	});
});
</script>
<style lang="scss">
@import '../style/public.scss';
</style>
<style scoped lang="scss">
#friend-merchant-manage {
	.box-f {
		:deep(.el-form-item__label) {
			padding: 0;
		}
	}

	:deep(.el-card__body) {
		height: 100%;
	}

	:deep(.el-card) {
		border: none !important;
	}

	.upload-demo {
		margin-left: 12px;
		margin-top: 2px;
	}

	ul {
		list-style: none;

		li {
			cursor: pointer;

			&:hover {
				color: red;
			}
		}
	}

	.icon-e {
		:deep(.el-icon) {
			margin-right: 0px !important;
		}
	}
}
</style>
